<!DOCTYPE html>
<html lang="en">
<head>
    
    <!-- start: Meta -->
    <meta charset="utf-8" />
    <title>SimpliQ - Flat & Responsive Bootstrap Admin Template</title>
    <meta name="description" content="SimpliQ - Flat & Responsive Bootstrap Admin Template." />
    <meta name="author" content="Łukasz Holeczek" />
    <meta name="keyword" content="SimpliQ, Dashboard, Bootstrap, Admin, Template, Theme, Responsive, Fluid, Retina" />
    <!-- end: Meta -->
    
    <!-- start: Mobile Specific -->
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- end: Mobile Specific -->
    
    <!-- start: CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet" />
    <link href="css/bootstrap-responsive.min.css" rel="stylesheet" />
    <link href="css/style.min.css" rel="stylesheet" />
    <link href="css/style-responsive.min.css" rel="stylesheet" />
    <link href="css/retina.css" rel="stylesheet" />
    <!-- end: CSS -->
    

    <!-- The HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <link id="ie-style" href="css/ie.css" rel="stylesheet">
    <![endif]-->
    
    <!--[if IE 9]>
        <link id="ie9style" href="css/ie9.css" rel="stylesheet">
    <![endif]-->
    
    <!-- start: Favicon and Touch Icons -->
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="ico/apple-touch-icon-144-precomposed.png" />
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="ico/apple-touch-icon-114-precomposed.png" />
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="ico/apple-touch-icon-72-precomposed.png" />
    <link rel="apple-touch-icon-precomposed" href="ico/apple-touch-icon-57-precomposed.png" />
    <link rel="shortcut icon" href="ico/favicon.png" />
    <!-- end: Favicon and Touch Icons -->   
        
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>

<body>
        <!-- start: Header -->
    <div class="navbar">
        <div class="navbar-inner">
            <div class="container-fluid">
                <a class="btn btn-navbar" data-toggle="collapse" data-target=".top-nav.nav-collapse,.sidebar-nav.nav-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </a>
                <a id="main-menu-toggle" class="hidden-phone open"><i class="icon-reorder"></i></a>     
                <div class="row-fluid">
                <a class="brand span2" href="index.html"><span>SimpliQ</span></a>
                </div>      
            </div>
        </div>
    </div>
    <!-- start: Header -->
    
        <div class="container-fluid-full">
        <div class="row-fluid">
                
            <!-- start: Main Menu -->
            <div id="sidebar-left" class="span2">
                
                <!-- <div class="row-fluid actions">
                                                    
                    <input type="text" class="search span12" placeholder="..." />
                
                </div> -->  
                
                <div class="nav-collapse sidebar-nav">
                    <ul class="nav nav-tabs nav-stacked main-menu">
                        <li><a href="table.html"><i class="icon-align-justify"></i><span class="hidden-tablet">用户列表</span></a></li>
                        <li><a href="form.html"><i class="icon-edit"></i><span class="hidden-tablet"> 添加一个新用户</span></a></li>
                        
                        <li><a href="file-manager.html"><i class="icon-folder-open"></i><span class="hidden-tablet">导入多个用户</span></a></li>
                        <li><a href="login.html"><i class="icon-lock"></i><span class="hidden-tablet">注销</span></a></li>
                    </ul>
                </div>
            </div>
            <!-- end: Main Menu -->
                        
            <!-- start: Content -->
            <div id="content" class="span10">
            
            
            <div class="row-fluid">     
                

                <div class="box span12">

                    <!-- <div class="box-header" data-original-title="">
                        <h2><i class="icon-user"></i><span class="break"></span>Members</h2>
                        <div class="box-icon">
                            <a href="#" class="btn-setting"><i class="icon-wrench"></i></a>
                            <a href="#" class="btn-minimize"><i class="icon-chevron-up"></i></a>
                            <a href="#" class="btn-close"><i class="icon-remove"></i></a>
                        </div>
                    </div> -->
                    <div class="box-content" id="add-users-div">
                        <!-- <button class="btn btn-primary">选择文件</button> -->
                        <input class="btn btn-primary" @change="change_file" type="file" name="" id="file">
                        <table class="table table-striped table-bordered bootstrap-datatable ">
                          <thead>
                              <tr>
                                  <th>用户名</th>
                                  <th>密码</th>
                                  <th>真实姓名</th>
                                  <th>简介</th>
                              </tr>
                          </thead>   
                          <tbody>
                            <tr v-for="user in users">
                                <td>{{user.username}}</td>
                                <td>{{user.password}}</td>
                                <td>{{user.name}}</td>
                                <td>{{user.intro}}</td>
                            </tr>
                            <!-- <tr>
                                <td style="text-align:center" colspan="4" v-if="users.length > 0"><button style="width: 80%;" class="btn btn-primary" @click="more">加载更多</button></td>
                            </tr> -->
                          </tbody>
                      </table>      
                        <button class="btn btn-primary" @click="submit">提交</button>
                    </div>
                </div><!--/span-->
            
            </div><!--/row-->

            
    
                    
            </div>
            <!-- end: Content -->
                
                </div><!--/fluid-row-->
                
        <!-- <div class="modal hide fade" id="myModal">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">×</button>
                <h3>Settings</h3>
            </div>
            <div class="modal-body">
                <p>Here settings can be configured...</p>
            </div>
            <div class="modal-footer">
                <a href="#" class="btn" data-dismiss="modal">Close</a>
                <a href="#" class="btn btn-primary">Save changes</a>
            </div>
        </div>
         -->
        <div class="clearfix"></div>
        
        <footer>
            <p>
                <span style="text-align:left;float:left">Copyright &copy; 2014.Company name All rights reserved.<a target="_blank" href="http://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></span>
            </p>

        </footer>
                
    </div><!--/.fluid-container-->

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="js/xlsx.core.min.js"></script>
    <script src="js/GLOBAL.js"></script>
    <script src="js/req.js"></script>
    <script type="text/javascript">
        // 读取本地excel文件
        function readWorkbookFromLocalFile(file, callback) {
            var reader = new FileReader();
            reader.onload = function(e) {
                var data = e.target.result;
                var workbook = XLSX.read(data, {type: 'binary'});
                if(callback) callback(workbook);
            };
            reader.readAsBinaryString(file);
        }
        // $('#file').change(function(){
        //     console.log('发生改变')
            
        // });
        var add = new Vue({
            el : '#add-users-div',
            data : {
                users : []
            },
            methods : {
                change_file : function(e){
                    var f = e.target.files[0];
                    readWorkbookFromLocalFile(f,function(workbook){
                        var sheet = workbook.Sheets.Sheet1;
                        var users = [];
                        // while(.users.length > 0)
                        //     this.users.pop()
                        var ref = '' + sheet['!ref'];
                        var length = eval('(' + ref[ref.length - 1] + ')');
                        for(var i=2;i<=length;i++){

                            user = {};
                            user['username'] = eval('(' + 'sheet.A' + i + '["v"])');
                            user['name'] = eval('(' + 'sheet.B' + i + '["v"])');
                            user['intro'] = eval('(' + 'sheet.C' + i + '["v"])');
                            user['password'] = eval('(' + 'sheet.D' + i + '["v"])');
                            users.push(user);
                        }
                        add.users = users;
                        console.log(add.users);
                    });
                },
                submit : function(){
                    var data = {'data':JSON.stringify(add.users)};
                    // alert(JSON.stringify(data))
                    // return;
                    // var tokenParam = localStorage.getItem('tokenParam');
                    postData(PRE_URL + 'user/addList',data,function(res){
                        // var res = eval('(' + str + ')');
                        if(res.code != 0){
                            alert(res.message);
                            return;
                        }
                        alert('添加成功');
                        add.users = [];
                    });
                }
            }
        })
    </script>


    <!-- start: JavaScript-->
        <script src="js/jquery-1.10.2.min.js"></script>
    <script src="js/jquery-migrate-1.2.1.min.js"></script>  
        <script src="js/jquery-ui-1.10.3.custom.min.js"></script>   
        <script src="js/jquery.ui.touch-punch.js"></script> 
        <script src="js/modernizr.js"></script> 
        <script src="js/bootstrap.min.js"></script> 
        <script src="js/jquery.cookie.js"></script> 
        <script src='js/fullcalendar.min.js'></script>  
        <script src='js/jquery.dataTables.min.js'></script>
        <script src="js/excanvas.js"></script>
    <script src="js/jquery.flot.js"></script>
    <script src="js/jquery.flot.pie.js"></script>
    <script src="js/jquery.flot.stack.js"></script>
    <script src="js/jquery.flot.resize.min.js"></script>
    <script src="js/jquery.flot.time.js"></script>
        
        <script src="js/jquery.chosen.min.js"></script> 
        <script src="js/jquery.uniform.min.js"></script>        
        <script src="js/jquery.cleditor.min.js"></script>   
        <script src="js/jquery.noty.js"></script>   
        <script src="js/jquery.elfinder.min.js"></script>   
        <script src="js/jquery.raty.min.js"></script>   
        <script src="js/jquery.iphone.toggle.js"></script>  
        <script src="js/jquery.uploadify-3.1.min.js"></script>  
        <script src="js/jquery.gritter.min.js"></script>    
        <script src="js/jquery.imagesloaded.js"></script>   
        <script src="js/jquery.masonry.min.js"></script>    
        <script src="js/jquery.knob.modified.js"></script>  
        <script src="js/jquery.sparkline.min.js"></script>  
        <script src="js/counter.min.js"></script>   
        <script src="js/raphael.2.1.0.min.js"></script>
    <script src="js/justgage.1.0.1.min.js"></script>    
        <script src="js/jquery.autosize.min.js"></script>   
        <script src="js/retina.js"></script>
        <script src="js/jquery.placeholder.min.js"></script>
        <script src="js/wizard.min.js"></script>
        <script src="js/core.min.js"></script>  
        <script src="js/charts.min.js"></script>    
        <script src="js/custom.min.js"></script>
    <!-- end: JavaScript-->
    
<div style="display:none"><script src='http://v7.cnzz.com/stat.php?id=155540&web_id=155540' language='JavaScript' charset='gb2312'></script></div>
</body>
</html>